@import '../../style/public.scss';
.Photo_container {
    @include flexCenter;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .Photo_imageListContainer {
        $photoImageListHeaderHeight: 40px;
        @include flexCenter;
        flex-direction: column;
        width: 33%;
        height: 100%;
        flex: 0 0 auto;
        .Photo_imageListHeader {
            width: 100%;
            height: $photoImageListHeaderHeight;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            .Photo_addImageButton {
                @include customButtonBasic;
                background-color: $color_main_bg;
                color: $color_main;
                padding: 4px 8px;
                margin-right: 4px;
                &:is(:first-child) {
                    margin-left: 4px;
                }
                &:hover {
                    background-color: darken($color_main_bg, 10%);
                }
                
                &:active {
                    background-color: darken($color_main_bg, 15%);
                }
            }
        }
        .Photo_imageList {
            @include scrollStyle;
            width: 100%;
            height: calc(100% - $photoImageListHeaderHeight);
            flex: 0 0 auto;
            overflow-x: hidden;
            margin: 0;
            .Photo_imageListItem {
                transition: $custom_transition;
                transition-duration: .15s;
                &:hover {
                    transform: scale(1.05);
                }
                &:active {
                    transform: scale(0.95);
                }                
            }
        }
    }

    .Photo_displayArea {
        @include flexCenter;
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        background-color: #272727;
        &>img {
            max-width: 80%;
            max-height: 80%;
            object-fit: contain;
            user-select: none;
        }
        .Photo_placeholder {
            font-size: $fontSize_large;
            color: rgba(255, 255, 255, 0.5);
            text-align: center;
            user-select: none;
        }
    }
}